<template>
  <header class="header-area">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="static/picture/favicon.png"><!-- all css here -->
    <div class="header-top theme-bg">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="welcome-area">
            </div>
          </div>
          <div class="col-lg-8 col-md-8 col-12">
            <div class="account-curr-lang-wrap f-right">
              <ul>
                <li class="top-hover"><a href="#">CNY (CN)</a>
                  <ul>
                    <li><a href="#">Dollar (US)</a></li>
                    <li><a href="#">Euro </a></li>
                  </ul>
                </li>
                <li><a href="#">English <i class="icon-arrow-down"></i></a>
                  <ul>
                    <li><a href="#">Chinese </a></li>
                    <li><a href="#">Spanish</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-bottom transparent-bar">
      <div class="container">
        <div class="row">
          <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-5">
            <div class="logo pt-39"><a href="#"><img alt="" src="../../static/picture/logo.png"></a></div>
          </div>
          <div class="col-xl-8 col-lg-7 d-none d-lg-block">
            <div class="main-menu text-center">
              <nav>
                <ul>
                  <li><router-link @click="upadate()" :to="{name:'index'}">HOME</router-link>
<!--                    <ul class="submenu">-->
<!--                      <li><a href="">home version 1</a></li>-->
<!--                      <li><a href="index-2.html">home version 2</a></li>-->
<!--                    </ul>-->
                  </li>
                  <li class="mega-menu-position">CATALOG
                    <ul class="mega-menu">
                      <li>
                        <ul>
                          <li class="mega-menu-title"><router-link @click="upadate()" :to="{name:'viewCatalog',query:{catId:'DOGS'}}">Dogs</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'K9-BD-01'}}">Bulldog</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'K9-CW-01'}}">Chihuahua</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'K9-DL-01'}}">Dalmation</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'K9-RT-01'}}">Golden Retriever</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'K9-RT-02'}}">Labrador Retriever</router-link></li>
                        </ul>
                      </li>
                      <li>
                        <ul>
                          <li class="mega-menu-title"><router-link @click="upadate()" :to="{name:'viewCatalog',query:{catId:'BIRDS'}}">Birds</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'AV-CB-01'}}">Amazon Parrot</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'AV-SB-02'}}">Finch</router-link></li>
                        </ul>
                      </li>
                      <li>
                        <ul>
                          <li class="mega-menu-title"><router-link @click="upadate()" :to="{name:'viewCatalog',query:{catId:'CATS'}}">Cats</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FL-DLH-02'}}">Persian</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FL-DSH-01'}}">Manx</router-link></li>
                        </ul>
                      </li>
                      <li>
                        <ul>
                          <li class="mega-menu-title"><router-link @click="upadate()" :to="{name:'viewCatalog',query:{catId:'FISH'}}">Fish</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FI-FW-01'}}">Koi</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FI-FW-02'}}">Goldfish</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FI-SW-01'}}">Angelfish</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'FI-SW-02'}}">Tiger Shark</router-link></li>
                        </ul>
                      </li>
                      <p></p>
                      <li>
                        <ul>
                          <li class="mega-menu-title"><router-link @click="upadate()" :to="{name:'viewCatalog',query:{catId:'REPTILES'}}">Reptiles</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'RP-LI-02'}}">Iguana</router-link></li>
                          <li><router-link @click="upadate()" :to="{name:'viewProduct',query:{productId:'RP-SN-01'}}">Rattlesnake</router-link></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li><router-link @click="upadate()" to = "/order/viewOrders">ORDERS</router-link></li>
                  <li><router-link @click="upadate()" to = "/common/about">ABOUT</router-link></li>
                  <li><router-link @click="upadate()" to = "/common/contact">CONTACT US</router-link></li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="col-xl-2 col-lg-2 col-md-8 col-sm-8 col-7">
            <div class="search-login-cart-wrapper">
              <div class="header-search same-style"><button class="search-toggle">
                <i class="icon-magnifier s-open"></i><i class="ti-close s-close"></i></button>
                <div class="search-content">
                  <form action="#"><input type="text" placeholder="Search"><button><i
                    class="icon-magnifier"></i></button></form>
                </div>
              </div>
              <div class="header-login same-style">
<!--                <router-link @click="upadate()" to="/user/user"><i class="icon-user icons"></i></router-link>-->
                <router-link @click="upadate()" to="/user"><i class="icon-user icons"></i></router-link>
              </div>
              <div class="header-cart same-style">
                  <button class="icon-cart">
                   <i class="icon-handbag"></i>
                  </button>
                <div class="shopping-cart-content">
                  <ul v-for="cart in cartList">
                    <li class="single-shopping-cart">
                      <div class="shopping-cart-img">
                        <router-link @click="upadate()" :to="{name:'viewItem',query:{itemId:cart.itemId,productId:cart.productId,catId:cart.categoryId}}">
                        <img :src="cart.iImage" alt=" " >
                        </router-link>
                      </div>
                      <div class="shopping-cart-title">
                        <h4><router-link @click="upadate()" :to="{name:'viewItem',query:{itemId:cart.itemId,productId:cart.productId,catId:cart.categoryId}}">{{cart.iName}}</router-link></h4>
                        <h6>Quantity: {{cart.qty}}</h6><span>${{cart.total}}</span>
                      </div>
                      <div class="shopping-cart-delete"><i class="ti-close"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="shopping-cart-total">
                    <h4>Total : <span class="shop-total">$ {{totalPrice}}</span></h4>
                  </div>
                  <div class="shopping-cart-btn"> <router-link @click="upadate()" to="/cart/cart">view cart</router-link>
                    <router-link @click="upadate()" to="/order/checkOrder">checkout</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mobile-menu-area electro-menu d-md-block col-md-12 col-lg-12 col-12 d-lg-none d-xl-none">
            <div class="mobile-menu">
              <nav id="mobile-menu-active">
                <ul class="menu-overflow">
                  <li><a href="#">HOME</a>
                    <ul>
                      <li><a href="">home version 1</a></li>
                      <li><a href="index-2.html">home version 2</a></li>
                    </ul>
                  </li>
                  <li><a href="#">pages</a>
                    <ul>
                      <li><a href="about-us.html">about us</a></li>
                      <li><a href="shop-page.html">shop page</a></li>
                      <li><a href="shop-list.html">shop list</a></li>
                      <li><a href="product-details.html">product details</a></li>
                      <li><a href="cart.html">cart page</a></li>
                      <li><a href="checkout.html">checkout</a></li>
                      <li><a href="wishlist.html">wishlist</a></li>
                      <li><a href="contact.html">contact us</a></li>
                      <li><a href="my-account.html">my account</a></li>
                      <li><a href="login-register.html">login / register</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Food</a>
                    <ul>
                      <li><a href="#">Dogs Food</a>
                        <ul>
                          <li><a href="shop-page.html">Grapes and Raisins</a></li>
                          <li><a href="shop-page.html">Carrots</a></li>
                          <li><a href="shop-page.html">Peanut Butter</a></li>
                          <li><a href="shop-page.html">Salmon fishs</a></li>
                          <li><a href="shop-page.html">Eggs</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Cats Food</a>
                        <ul>
                          <li><a href="shop-page.html">Meat</a></li>
                          <li><a href="shop-page.html">Fish</a></li>
                          <li><a href="shop-page.html">Eggs</a></li>
                          <li><a href="shop-page.html">Veggies</a></li>
                          <li><a href="shop-page.html">Cheese</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Fishs Food</a>
                        <ul>
                          <li><a href="shop-page.html">Rice</a></li>
                          <li><a href="shop-page.html">Veggies</a></li>
                          <li><a href="shop-page.html">Cheese</a></li>
                          <li><a href="shop-page.html">wheat bran</a></li>
                          <li><a href="shop-page.html">Cultivation</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li><a href="#">blog</a>
                    <ul>
                      <li><a href="blog.html">blog page</a></li>
                      <li><a href="blog-leftsidebar.html">blog left sidebar</a></li>
                      <li><a href="blog-details.html">blog details</a></li>
                    </ul>
                  </li>
                  <li><a href="contact.html">Contact us </a></li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import {getCartByUsername} from "../api/api";
let nowUsername= sessionStorage.getItem("nowUsername");
export default {
  name: "header",
  data(){
    return{
      totalPrice: 0,
      cartList:[

      ]
    }
  },
  mounted() {
    this.getCartList();
  },
  methods:{
    upadate(){
      location.reload();
    },
    getCartList(){

      getCartByUsername(nowUsername).then((res) =>{
        console.log(res);
        this.cartList = res.data.data;
        for (var i = 0;i < res.data.data.length;i++){
          this.cartList[i]['productId'] = res.data.data[i].productId;
          this.cartList[i]['categoryId'] = res.data.data[i].categoryId;
        }
        for(var i=0;i < this.cartList.length;i++){
          this.totalPrice += this.cartList[i].total;
        }
      })

    }
  }
}
</script>

<style scoped>
  @import "../../static/css/bootstrap.min.css";
  @import "../../static/css/animate.css";
  @import "../../static/css/simple-line-icons.css";
  @import "../../static/css/themify-icons.css";
  @import "../../static/css/owl.carousel.min.css";
  @import "../../static/css/slick.css";
  @import "../../static/css/meanmenu.min.css";
  @import "../../static/css/style2.css";
  @import "../../static/css/responsive.css";
</style>
